<template>
  <div id="Base" class="company-detail pt116">
    <div class="company-detail__warp">
      <div class="padding-tb-15">
        <Breadcrumb separator="">
          <BreadcrumbItem>当前位置</BreadcrumbItem>
          <BreadSeparator>:</BreadSeparator>
          <BreadcrumbItem><a href="/service">数据服务</a></BreadcrumbItem>
          <BreadSeparator>></BreadSeparator>
          <BreadcrumbItem><a href="/compList">企业数据</a></BreadcrumbItem>
          <BreadSeparator>></BreadSeparator>
          <BreadcrumbItem>企业详情</BreadcrumbItem>
        </Breadcrumb>
      </div>
			<div class="company-detail__header">
          <div class="staff-info">

            <div class="staff-top flex-s">
              <div class="logo-text">{{sliceE4(detail?.corpName)}}</div>
              <div class="staff-box">
                <h3 class="staff-box-h3">
                  <span class="staff-box-h3-name">{{ detail?.corpName }} </span>
                  <i class="ic" v-if="detail?.enterCorp==='1'">进疆企业</i>
                  <ul class="certificate">
                    <li  v-for="(item, index) in detail?.quals" :key="index">
                      <span>{{ item }}</span>
                    </li>
                  </ul>
                </h3>

                <p>统一社会信用代码 : {{ detail?.corpCode }}</p>

                <div class="creditBox" v-if="level.length">
                  <span class="inc-icon">信用等级</span>
                  <ul class="credit">
                    <li v-for="(item, index) in level" :key="index">
                      <span class="mr8">{{item.typeName}}</span>
                      <span class="orange"> {{ creditLevelEnum[item.creditGrade] }}</span>
                    </li>
                  </ul>
                </div>

              </div>
              <div class="refresh">
                <h3 class="text-right"><span>企业数据入库时间：</span>{{ parseTime(detail?.creationTime) }}</h3>
                <h4><i></i> 最近更新时间：{{ parseTime(detail?.lastUpdate,'{y}-{m}-{d} {h}:{i}:{s}') }}</h4>
              </div>

            </div>

            <div class="staff-bottom">
              <p><span>企业法定代表人 :</span>{{detail?.legalPerson}}</p>
              <p><span>工商登记时间 :</span>{{parseTime(detail?.compRegDate)}}</p>
              <p><span>企业注册地 :</span>{{detail?.regionName}}  </p>
              <p><span>曾用名 :</span> {{detail?.corpOldName}}</p>
              <p style="width: 100%;"><span>企业经营地址 :</span>{{detail?.compRegAddr}}  </p>
              <p style="width: 100%;"><span> 企业信息变更历史 :</span>--</p>
            </div>

            <!-- <i class="blue pointer">查看地图</i>-->

            <ul class="staff-num-list">
              <li>
                <i class="ic1"></i>
                <span>{{ Count?.aptCertCount }}</span>
                <p>资质资格</p>
              </li>
              <li>
                <i class="ic2"></i>
                <span>{{ Count?.staffCount }}</span>
                <p>企业人员</p>
              </li>
              <li>
                <i class="ic3"></i>
                <span>{{ Count?.buildingCount }}</span>
                <p>在建项目</p>
              </li>
              <li>
                <i class="ic4"></i>
                <span>{{ Count?.projectCount }}</span>
                <p>平台业绩</p>
              </li>
              <li>
                <i class="ic5"></i>
                <span>{{ Count?.historyCount }}</span>
                <p>补录业绩</p>
              </li>
              <li>
                <i class="ic6"></i>
                <span>{{ Count?.limitCount }}</span>
                <p>当前行为限制</p>
              </li>
            </ul>

          </div>
			</div>

      <Tabs type="card" v-model:activeKey="activeKey">
        <TabPane key="1" tab="企业资质资格">
          <Quality id="Quality" />
        </TabPane>
        <TabPane key="2" tab="企业人员">
          <Staff id="Staff" />
        </TabPane>
        <TabPane key="3" tab="企业业绩">
          <achievement id="achievement"/>
        </TabPane>
        <TabPane key="4" tab="行为限制">
          <Limit id="Limit" />
        </TabPane>
        <TabPane key="5" tab="行政处罚">
          <punish id="punish"/>
        </TabPane>
        <TabPane key="6" tab="撤回行政许可">
          <punish2 id="punish2"/>
        </TabPane>
<!--        <TabPane key="7" tab="企业信用">
          <Credit id="Credit" />
        </TabPane>-->
      </Tabs>
		</div>
  </div>
  <!--<branch id="branch"/> 分支机构-->
</template>

<script lang="ts">
import { defineComponent, onMounted, provide, ref } from 'vue';
import { useRoute } from 'vue-router';
import { DetailAnchor } from '/@/components/anchorComponent/index';
import { Quality, Staff, Credit, Limit , branch , punish , punish2, achievement } from './src/index';
enum creditLevelEnum {
  APP_XYPJ_XYDJ_0001 = 'AAA',
  APP_XYPJ_XYDJ_0002 = 'AA',
  APP_XYPJ_XYDJ_0003 = 'A',
  APP_XYPJ_XYDJ_0004 = 'B',
  APP_XYPJ_XYDJ_0005 = 'C',
  APP_XYPJ_XYDJ_1999 = '暂无'
}
import {
  getCompanyBaseApi,
  getCountApi,
  companyBaseModel,
  getCompanyCreditLevelApi,
  creditLevel,
  corpCountModel
} from '/@/api/company';
import { parseTime   } from '/@/utils';
import { Breadcrumb, Tabs} from "ant-design-vue";

export default defineComponent({
	components: {
    DetailAnchor, Quality, Staff, Credit, Limit , branch , punish , achievement,
    Breadcrumb, BreadcrumbItem: Breadcrumb.Item,
    BreadSeparator: Breadcrumb.Separator, punish2,
    Tabs, TabPane: Tabs.TabPane
  },
  name: "Detail",
  setup() {
    const { params } = useRoute();
    const corpId:string = params.id as string;
    const level = ref<creditLevel[]>([]);
    const detail = ref<companyBaseModel | null>(null);
    const Count = ref<corpCountModel | null>(null);

    provide('corpId', corpId);
    const init = async() => {
     detail.value = await getCompanyBaseApi(corpId);
     Count.value = await getCountApi(corpId);
     level.value = await getCompanyCreditLevelApi(corpId);
    }

    onMounted(init);
    return {
       detail, Count ,level, creditLevelEnum, parseTime,activeKey: ref("1")
    }
  },
  methods: {
    sliceE4: function (val) {
      if (val) {
        return val.slice(0, 4);
      }
    },
  }
})
</script>

<style lang="less" scoped>
.company-detail {

  .company-detail__warp {
		width: @main-width;
		margin: 0 auto;

		.company-detail__header {
      position: relative;
      padding: 30px;
      margin-bottom: 20px;
      background: #FFF;

		}
	}

  .staff-info{

    .staff-top{
      position: relative;
      margin-bottom: 15px;

      .logo-text{
        width: 110px;
        height: 110px;
        padding: 10px 10px;
        margin-right: 24px;
        font-size: 36px;
        font-weight: 400;
        line-height: 40px;
        color: #fff;
        text-align: center;
        background: #1985FF;
        border-radius: 4px;
      }

      .refresh {
        top: 0;
        right: 0;
      }
    }

    .staff-box{
      width: 1000px;
      padding-top: 5px;

      h3{
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        width: 750px;
        min-height: 30px;
        margin-bottom: 0;
        font-size: 24px;
        font-weight: bold;
        color: #1A1F33;

        .staff-box-h3-name{
          margin: 0 10px 5px 0;
        }

        .ic{
          display: inline-block;
          height: 36px;
          padding: 2px 8px;
          margin-right: 10px;
          margin-left: 10px;
          font-size: 14px;
          line-height: 30px;
          color: #1985FF;
          border: 1px solid #1985FF;
          border-radius: 2px;
        }
      }

      >p{
        font-size: 16px;
      }

      .creditBox{
        display: flex;
        padding: 10px 10px 3px;
        background: #F7F8FA;

        .inc-icon{
          width: 100px;
          padding-left: 30px;
          color: #FF802F;
          background: url("/src/assets/img/xin.png") no-repeat 5px 2px;
        }

        .credit {
          width: calc(100% - 120px);
          margin-bottom: 0;

          >li{
            display: inline-block;
            margin-right: 25px;
            margin-bottom: 2px;
            overflow: hidden;

            span{
              display: inline-block;
            }
          }
        }
      }

    }

    .staff-bottom {
      display: flex;
      padding: 16px 20px;
      flex-wrap: wrap;
      background: #f7f8fa;

      p {
        width: 450px;
        padding-right: 20px;
        margin: 4px 0;
        line-height: 22px;
        color: #000;

        > span {
          margin-right: 8px;
          line-height: 20px;
          color: #777;
        }

        &:nth-child(2n) {
          width: calc(100% - 450px);
        }
      }
    }

  }

}

::v-deep(.ant-tabs-card) {
  margin-bottom: 40px;
  background: white;

  .ant-tabs-bar {
    margin: 0;
  }

  .ant-tabs-nav-container {
    height: 58px !important;
    background: #f5f5f6;
    border: 1px solid #e8eaee;

    .ant-tabs-tab {
      height: auto !important;
      padding: 18px 40px !important;
      margin: 0 !important;
      font-size: 16px;
      line-height: 22px !important;
      background: #f5f5f6 !important;
      border: 0 !important;

      &.ant-tabs-tab-active {
        color: @blue;
        background: @white !important;
      }
    }
  }

  .ant-tabs-tabpane-active{
    padding-bottom: 30px !important;
  }
}

.certificate {
  display: flex;
  margin: 0 ;
  justify-content: start;
  font-size: 14px;

  li {
    height: 35px;
    padding: 4px 10px;
    margin: 0 8px 0 0;
    line-height: 25px;
    color: white;
    text-align: center;
    border-radius: 4px;

    &:nth-child(6n) {
      background: #216de5;
    }

    &:nth-child(6n+1) {
      background: #16AFE8;
    }

    &:nth-child(6n+2) {
      background: rgba(255, 111, 39, 1);
    }

    &:nth-child(6n+3) {
      background: rgba(255, 3, 3, 1);
    }

    &:nth-child(6n+4) {
      background: rgba(14, 200, 20, 1);
    }

    &:nth-child(6n+5) {
      background: rgba(0, 191, 213, 1);
    }
  }
}
</style>
